<template>
    <div class="custom-tabs">
            <div class="custom-tabs__nav">
                <ul>
                    <li 
                        v-for="item in $_tabsNav"
                        :class="{
                            active: item.name === nameActive
                        }"
                        @click="onChange(item.name)">
                        {{item.label}}
                    </li>
                </ul>
            </div>
            <section class="custom-tabs__content">
                <slot name="tabs-con"></slot>
            </section>
        </div>
</template>
<script>
export default {
    name: 'custom-tabs',
    props: {
        // 当前active的名字
        name: {
            type: String
        },
        // tabs nav 列表
        tabsNav: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            /**
             * 当前点击的name名称
             *
             * @type {String}
             */
            nameActive: this.name || this.tabsNav[0].name || '0'
        }
    },
    computed: {
        /**
         * 将传递进来的值格式化，如果没有指定name 则以当前索引来指定
         */
        $_tabsNav() {
            let arr = []
            this.tabsNav.map((item, index) => {
                if (item.name) {
                    arr.push(item)
                } else {
                    arr.push({
                        label: item.label,
                        name: index.toString()
                    })
                }
            })
            return arr
        }
    },
    methods: {
        /**
         * tab 切换改变当前nameActive 并把name的值回调给父组件
         *
         * @param {String} name - 当前被点击后的nameActive
         */
        onChange(name) {
            this.nameActive = name

            // 父组件回调
            this.$emit('on-click-tabs', name)
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.custom-tabs {
    margin-top: @gap;
    &__nav {
        border-bottom: 1px solid @border-color-base;
        ul {
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: -1px;
        }
        li {
            -webkit-user-select: none;
            margin-right: 6px;
            font-size: 13px;
            display: inline-block;
            position: relative;
            padding: 5px 16px 4px;
            height: 31px;
            border-radius: 4px 4px 0 0;
            border: 1px solid @border-color-base;
            border-bottom: 0;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &.active {
                height: 32px;
                background: #fff;
                padding-bottom: 5px;
                color: @primary-color;
            }
            &:hover {
                color: @primary-color;
            }
        }
    }
    &__content {
        background: #fff;
        border: 1px solid @border-color-base;
        border-top: 0;
        padding: @gap;
        .goods-list {
            margin-top: 0;
        }
    }
}
</style>


